<template>
  <div class="dpImdex2"> 
    <div class="dpTopIndex">{{contentLeft.name}}</div>
    <div class="backClass" @click="goBack()">返回首页</div>
    <!-- <div class="selectYear">
      <a-date-picker
        placeholder="请选择年份"
        mode="year"
        :open="dataopen"
        format="YYYY"
        valueFormat="YYYY"
        :allowClear="false"
        @openChange="openChangeYear"
        @panelChange="panelChangeYear"
        v-model="years"
      />
    </div> -->
    <a-row style="margin-top:36px;" :gutter="10">
        <a-col :md="8" >
          <div class="leftBox topText" style="margin-bottom:10px">
            <div class="topTitle">{{contentLeft.name}}介绍</div>
            <div>{{contentLeft.content}}</div>
          </div>
          <div class="leftBox">
            <div class="topTitle">产业集群</div>
            <div class="contentImg" v-if="!contentLeft.img">
              <img src="@/assets/no_data.png" class="boDataImg"/>
              <div>暂无图片</div>
            </div>
            <div class="contentImg" v-else>
              <img :src="imgDownload+contentLeft.img" class="boDataImg" style="width:100%"/>
            </div>
            <!-- <div class="tablelist">
                <vue-seamless-scroll :class-option="defaultOption" :data="consultList">
                    <table>
                        <tbody>
                            <tr v-for="(list,index) in consultList" :key="index" >
                                <td :data-contents="list.title" :data-names="list.title">
                                    <div class="d-cell" style="color:#fff" @click="showPop(list)">
                                        <div class="leftContent">{{list.title}}</div>
                                        <div class="rightIcon">{{list.createTime}}</div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </vue-seamless-scroll>
            </div> -->
          </div>
        </a-col>
        <a-col :md="8" >
        <div class="rightBox">
          <echartsRight ref="echartsRight" @selectObj="selectObj"/>
        </div>
        <div class="leftBox rightBox2">
          <div class="topTitle">头部企业</div>
          <dv-scroll-board :config="config" style="width: 100%; height: 192px;" @click="handleRowClick"/>
        </div>
        </a-col>
        <a-col :md="8">
          <div class="leftBox rightBox3">
            <div class="before" @click="btnClick(1)"></div>
            <div class="after" @click="btnClick(2)"></div>
            <div class="topTitle">集群高质量发展指数体系</div>

            <div class="topCContent">
              <div class="contentItem" v-for="(item,index) in topList" :key="index" @click="showItenCompany(item)">
                <div>{{item.companyCount||0}}</div>
                <div class="centerImg">
                  <img src="@/assets/img/single.png" class="itemImg"/>
                  <img src="@/assets/img/wave.png" class="fixedImg"/>
                </div>
                <span class="headNan">{{item.name}}</span>
              </div>
            </div>
          </div>
          <div class="leftTop topBox" style="height:292px;margin-top:10px">
            <div class="topTitle">{{contentLeft.name}}营收税金柱状图{{name}}</div>
            <div style="height: calc(100% - 52px)">
              <echartsBar ref="echartsBar"/>
            </div>
          </div>
          <div class="leftTop leftBottom" style="height:243px">
            <div class="topTitle">{{contentLeft.name}}月度主要经济指标{{name}}</div>
            <div class="title" style="opacity:0">特色产业集群数量</div>
            <!-- <div class="number" style="opacity:0">
              <span class="numberCount">{{contentLeft.clusterCount||0}}</span>
              <span class="numUnit">个</span>
            </div> -->
            <div class="number number2">
              <div>
                <span class="numberCount" style="color:rgb(205,133,45)">{{contentLeft.qyzs||0}}</span>
                <span>个</span>
              </div>
              <div>
                <span class="numberCount" style="color:rgb(122,3,239)">{{contentLeft.yysr||0}}</span>
                <span>亿元</span>
              </div>
              <div>
                <span class="numberCount" style="color:rgb(29,249,252)">{{contentLeft.sjsj||0}}</span>
                <span>亿元</span>
              </div>
              <div>
                <span class="numberCount" style="color:rgb(186,186,3)">{{contentLeft.cyrs||0}}</span>
                <span>人</span>
              </div>
            </div>
            <div class="number number2">
              <div class="relativeBTN">
                <div class="text">企业数量</div>
                <img src="@/assets/img/bg.png" class="itemBg"/>
                <img src="@/assets/img/xiankuang-04.png" class="itemCenter"/>
              </div>
              <div class="relativeBTN">
                <div class="text">营业收入</div>
                <img src="@/assets/img/bg.png" class="itemBg"/>
                <img src="@/assets/img/xiankuang-04.png" class="itemCenter"/>
              </div>
              <div class="relativeBTN">
                <div class="text">上缴税金</div>
                <img src="@/assets/img/bg.png" class="itemBg"/>
                <img src="@/assets/img/xiankuang-04.png" class="itemCenter"/>
              </div>
              <div class="relativeBTN">
                <div class="text">从业人员</div>
                <img src="@/assets/img/bg.png" class="itemBg"/>
                <img src="@/assets/img/xiankuang-04.png" class="itemCenter"/>
              </div>
            </div>
          </div>
        </a-col>
    </a-row>
    <a-modal v-model="visible" @ok="visible=false" :footer="null" :title="selectPopInfo.name" width="1000px" >
      
      <div class="itemModel">
          <div style="text-align:center">
          <img :src="imgDownload+selectPopInfo.img" alt="" class="itemModelImg">
          </div>
          <div v-html="selectPopInfo.content" ></div>
      </div>
    </a-modal>
    <a-modal v-model="visible2" @ok="visible2=false" :footer="null" :title="null" width="1000px" >
      <div class="itemModel">
        <div class="line">集群内{{jiqunName}}中小企业名单</div>
        <div class="line">
          <div class="xuhao">序号</div>
          <div class="zlmc"  v-if="jiqunName=='发明专利'">专利名称</div>
          <div class="zlmc"  v-if="jiqunName.indexOf('标准修改制定')>-1">标准名称</div>
          <div class="mingcheng">企业名称</div>
          <!-- <div class="xian">县（市、区）</div>
          <div class="jiqun">集群</div> -->
        </div>
        <template v-if="popCompanyList.length>0">
           <div class="line" v-for="(item,index) in popCompanyList" :key="index">
            <div class="xuhao">{{index+1}}</div>
            <div class="zlmc" v-if="jiqunName=='发明专利'">{{item.zlmc}}</div>
            <div class="zlmc"  v-if="jiqunName.indexOf('标准修改制定')>-1">{{item.zlmc}}</div>
            <div class="mingcheng">{{item.name}}</div>
            <!-- <div class="xian">{{contentLeft.name}}</div>
            <div class="jiqun">{{item.cid_dictText}}</div> -->
          </div>
        </template>
        <template v-else>
          <div class="line" style="height:300px;">
              <div>暂无数据!</div>
          </div>
         
        </template>
        
      </div>
    </a-modal>
  </div>
</template>
<script>
  import moment from 'moment'
  import echartsRight from './echartsRight'
  import { getAction } from '@/api/manage'
  import { Empty } from 'ant-design-vue';
  import echartsBar  from "./echartsBar";
  export default {
    components:{echartsRight,echartsBar},
    data () {
      return {
        consultList:[],
        years:moment().startOf('year'),
        dataopen: false,
        cid:'',
        visible:false,
        content:'',
        contentLeft:{},
        selectPopInfo:{},
        topList:[],
        allList:[],
        page:1,
        selectContent:'',
        simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
        imgDownload: window._CONFIG['staticDomainURL']+'/',
        name:'',
        industrStatistics:{},
        companyList:[],
        popCompanyList:[],
        jiqunName:'',
        visible2:false,
        config:{},
        url:{
          newList:'indust/indNews/list',
          indCompany:'indust/indCompany/list',
          queryDpStatistics:'indust/indTag/queryIndTagByCid',
          getIndClusterSort:'indust/indJqsj/list',
          queryIndClusterStatistics:'indust/indCluster/queryIndClusterStatistics',
        }
      }
    },
    created () {
      this.cid = this.$route.query.cid
      this.contentLeft = JSON.parse(localStorage.getItem('content'))
      console.log(this.contentLeft,'this.contentLeft')
      this.$nextTick(()=>{
        this.$refs.echartsRight.name = this.contentLeft.name
      })
      this.newList()
      this.indCompany()
      this.queryDpStatistics()
      this.getIndClusterSort()
      this.getDict2()

      this.queryIndClusterStatistics()
    },
    methods:{
      handleRowClick(row){
        let index = row.rowIndex
        this.selectPopInfo = this.companyList[index]
        this.visible = true
      },
      // 点击选择框事件 弹出日期组件选择年
      openChangeYear(status) {
        if (status) {
          this.dataopen = true;
        } else {
          this.dataopen = false;
        }
      },
      // 选择年之后 关闭弹框
      panelChangeYear(value){
        this.years = value
        this.dataopen = false;
      },
      newList() {
        getAction(this.url.newList,{cid:this.cid,pageSize:1000000}).then(res=>{
          if(res.success){
            this.consultList = res.result.records
          }else{

          }
        })
      },
      // 获取单个产业集群的企业
      showItenCompany(item){
        this.jiqunName = item.name
        getAction(this.url.indCompany,{cid:this.cid,tag:item.id,pageSize:100000}).then(res=>{
          if(res.success){
            this.visible2 = true;
            this.popCompanyList = res.result.records
          }else{
          }
        })
      },
      indCompany() {
        getAction(this.url.indCompany,{cid:this.cid,pageSize:100000}).then(res=>{
          if(res.success){
            this.companyList = res.result.records
            this.$refs.echartsRight.initMap(res.result.records)
            let data = []
            res.result.records.forEach((item,index)=>{
              if(index<=2){
                let itemData = [`<span style="cursor: pointer;color:#ffffff">${item.name}</span>`]
                data.push(itemData)
              }
            })
            this.config =  {
                  headerBGC: "revert",
                  oddRowBGC: 'revert',
                  evenRowBGC: 'revert',
                  color:'#28dff1',
                  header: ["头部企业"],
                  rowNum: 3,
                  headerHeight: 0,
                  align: ['left'],
                  data: data,
              }
          }else{
            this.$refs.echartsRight.initMap([])
          }
        })
      },
      queryDpStatistics(){
        getAction(this.url.queryDpStatistics,{clusterId:this.cid,pageSize:100000}).then(res=>{
          if(res.success){
            this.allList = res.result
            this.topList = this.allList.slice(0,8)
            this.page = 1
          }else{

          }
        })
      },
      btnClick(index) {
        let count = ''
        if(index==1) {
          if(this.page==1) {
            return
          }
          this.page--
          count = (this.page-1)*8
        } else {
          if(this.page>parseInt(this.allList.length/8)){
            return
          }
          this.page++
          count = (this.page-1)*8
        }
        this.topList = this.allList.slice(count,count+8)
      },
      selectObj(obj){
        this.selectContent = obj.content
      },
      goBack() {
        this.$router.push({
          path: '/dp/index'
        })
      },
      getIndClusterSort() {
        getAction(this.url.getIndClusterSort,{cid:this.cid,pageSize:999999}).then(res=>{
          if(res.success){
            this.$refs.echartsBar.ininMap(res.result.records)
          }else{

          }
        })
      },
      getDict2(){
        getAction('sys/dict/getDictItems/dp_name2',{}).then(res=>{
          if(res.success){
            this.name = res.result[0].label
          }else{

          }
        })
      },
      queryIndClusterStatistics() {
        getAction(this.url.queryIndClusterStatistics).then(res=>{
          if(res.success){
            this.industrStatistics = res.result
          }else{

          }
        })
      },
    }
  }
</script>
<style lang="less" scoped>
.dpImdex2{
  background:url('../../assets/img/u0_state0.jpg') center no-repeat;
  background-size: cover;
  overflow: hidden;
  // width:1920px;
  // height: 1080px;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top:0%;
  left:0%;
  overflow-y:scroll ;
  padding:0 10px;
  box-sizing: border-box;
  .dpTopIndex{
    height: 57px;
    background:url('../../assets/img/u7 (1).png') center no-repeat;
    text-align: center;
    font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
    font-weight:700;
    font-style:normal;
    color:#FFFFFF;
    font-size: 30px;
    line-height: 76px;
    position: relative;
    text-indent: -35px;
    &::after{
      content: '';
      width: 593px;
      height: 29px;
      position: absolute;
      bottom:-6px;
      left:50%;
      transform: translateX(-53%);
      background:url('../../assets/img/u8 (1).png') center no-repeat;
    }
  }
  .backClass{
    background: rgba(45, 140, 240, 1);
    height: 45px;
    width: 96px;
    text-align: center;
    line-height: 45px;
    border-radius: 96px;
    color:#ffffff;
    position: absolute;
    right:10px;
    top:20px;
    font-size: 18px;
    cursor: pointer;
  }
  .leftBox{
    border:1px solid rgba(45, 140, 240, 1);
    // background:url('../../assets/img/u347.png') center no-repeat;
    height: 483px;
    width: 100%;
    overflow: hidden;
    color:#fff;
    .contentImg{
      text-align: center;
      font-size:18px;
    }
    .boDataImg{
      width: 300px;
      margin:10px 0 20px;
    }
  }
  .topText{
    padding:0 32px;
    color: #c8e8ff;
    font-size: 18px;
    line-height: 1.8;
    text-indent: 24px;
    overflow-y:scroll ;
  }
  .rightBox{
    margin-right: 10px;
    // height: 976px;
    height: 723px;
    border:1px solid rgba(45, 140, 240, 1);
    width: 100%;
  }
  .rightBox2{
    height: 243px;
    margin-top:10px;
  }
  .rightBox3{
    // height: 976px;
    height: 420px;
    position: relative;
    margin-right:10px;
  }
  .topTitle{
    height: 52px;
    background:url('../../assets/img/u348.png') center no-repeat;
    text-align: center;
    line-height: 52px;
    font-family: sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    color: rgb(255, 255, 255);
    border-width: 0px;
  }

  .topCContent{
      padding: 0 64px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
      .contentItem{
        width: calc((100% - 60px)/4);
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #66FFFF;
        font-size: 32px;
        text-align: center;
        .itemImg{
          // width: 84px;
          width: 50px;
          height: fit-content;
          position: relative;
          z-index: 2;
        }
        span{
          display: block;
          font-size: 14px;
          color: #ffffff;
        }
        .centerImg{
          position: relative;
          margin:0px 0 30px;
          .fixedImg{
            position: absolute;
            bottom:8px;
            left:50%;
            transform: translate(-50%,50%);
            animation: rotation 3s linear infinite;
          }
        }
        .headNan{
          height: 42px;
          display: flex;
          flex-direction: column;
          justify-content: start;
          text-align: center;
        }
      }
    }
}
.before{
    content: '';
    position: absolute;
    top:57%;
    left:0px;
    width: 64px;
    height: 64px;
    transform: translateY(-50%);
    background:url('../../assets/img/u548.png') center no-repeat;
    cursor: pointer;
  }
  .after{
    content: '';
    position: absolute;
    top:57%;
    right:0px;
    width: 64px;
    height: 64px;
    transform: translateY(-50%) rotate(180deg);
    background:url('../../assets/img/u548.png') center no-repeat;
    cursor: pointer;
  }



  .leftTop{
    // background:url('../../assets/img/u347.png') center no-repeat;
    border:1px solid #2d8cf0;
    height: 522px;
    position: relative;
    width: 100%;
    .topTitle{
      height: 52px;
      background:url('../../assets/img/u348.png') center no-repeat;
      text-align: center;
      line-height: 52px;
      font-family: sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 18px;
      color: rgb(255, 255, 255);
      border-width: 0px;
    }
    .selectTitleBox{
      margin:7px 20px;
      display: flex;
      gap:15px;
      overflow-x:scroll ;
      width: 95%;
      box-sizing: border-box;
      .selectItem{
        width:108px;
        height: 36px;
        line-height: 36px;
        font-family: 'Arial', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        color: #FFFFFF;
        cursor: pointer;
        text-align: center;
      }
      .checkItem{
        background:url('../../assets/img/u350_selected.png') center no-repeat;
        width: 108px;
      }
    }
    .topCContent{
      padding: 0 64px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
      .contentItem{
        width: calc((100% - 60px)/4);
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #66FFFF;
        font-size: 32px;
        text-align: center;
        .itemImg{
          // width: 84px;
          width: 50px;
          height: fit-content;
          position: relative;
          z-index: 2;
        }
        span{
          display: block;
          font-size: 14px;
          color: #ffffff;
        }
        .centerImg{
          position: relative;
          margin:0px 0 26px;
          .fixedImg{
            position: absolute;
            bottom:8px;
            left:50%;
            transform: translate(-50%,50%);
            animation: rotation 3s linear infinite;
          }
        }
        .headNan{
          height: 42px;
          display: flex;
          flex-direction: column;
          justify-content: start;
          text-align: center;
        }
      }
    }
    .tablelist{
      height: 400px;
      overflow: hidden;
      // padding:0 20px 0 30px;
      font-size: 15px;
      .d-cell{
        display: flex;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
        position: relative;
        line-height: 40px;
        padding-left:20px;
        width: 100%;
        cursor: pointer;
        .rightIcon{
          height: 40px;
          width: 100px;
          vertical-align: middle;
          margin:0 0 0 10px;
          text-indent: 0;
        }
        .leftContent{
          flex:1;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          white-space: nowrap;
          text-indent: 0;
        }
        &::before{
          width: 11px;
          height: 11px;
          content:'';
          background: url('../../assets/img/tuoyuan.png');
          position: absolute;
          left:0px;
          top:50%;
          transform: translateY(-50%);
        }
      }
      .tupian{
          width: 584px;
          height: 239px;
      }
      .title{
          font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
          font-weight: 700;
          font-size: 28px;
          color: #50FFFF;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          margin:10px 0;
      }
  }
  }
  .topBox{
    margin-bottom:10px;
    .before{
      content: '';
      position: absolute;
      top:57%;
      left:0px;
      width: 64px;
      height: 64px;
      transform: translateY(-50%);
      background:url('../../assets/img/u548.png') center no-repeat;
      cursor: pointer;
    }
    .after{
      content: '';
      position: absolute;
      top:57%;
      right:0px;
      width: 64px;
      height: 64px;
      transform: translateY(-50%) rotate(180deg);
      background:url('../../assets/img/u548.png') center no-repeat;
      cursor: pointer;
    }
  }
  .leftBottom{
    height: 339px;
    border:1px solid #2d8cf0;
    // background:url('../../assets/img/u550.png') center no-repeat;
    // background-size: cover;
    .title{
      font-size: 16px;
      color:#07a6ff;
      text-align: center;
      margin:10px 0 5px;
    }
    .number{
      display: flex;
      justify-content: center;
      color: #07a6ff;
      font-size: 13px;
      // line-height: 100px;
      .numberCount{
        width: 36px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-family: 'DIN Bold', 'DIN', sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 48px;
        // color: #FFFFFF;
        margin-right: 10px;
        // background: rgb(13,67,121);
        //border:1px solid #07a6ff;
        border-radius: 4px;
      }
      .numUnit{
        padding:33px 0 20px 10px;
      }
    }
    .number2{
      gap: 10px;
      div{
        width: 150px;
        // text-align: right;
        text-align: center;
      }
      .relativeBTN{
        position: relative;
        padding-right: 0px;
        .itemCenter{
          position: absolute;
          top:50%;
          left:50%;
          transform: translate(-50%,-50%);
          width:60px;
          height: 60px;
          animation: rotation2 3s linear infinite;
        }
        .text{
          font-size: 16px;
          color:#ffffff;
          position: absolute;
          top:50%;
          left:50%;
          transform: translate(-50%,-50%);
          font-weight: 700;
          padding-right: 0;
          text-align: center;
          z-index: 2;
        }
      }
      .numberCount{
        width: 20px;
        height: 40px;
        line-height: 40px;
        // background: rgb(205,133,45);
        border:0;
        font-size: 28px;
      }
      .itemBg{
        width: 100px;
        height: 100px;
      }
    }
  }
  .itemModelImg{
    max-width: 100%;
    height: auto;
    width: fit-content;
    margin:0 auto 10px;
  }
  .line{
    display: flex;
    text-align: center;
    height: 50px;
    border:1px solid #e8e8e8;
    border-bottom:0;
    text-align: center;
    justify-content: center;
    align-items: center;
    &:first-child{
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    &:last-child{
        border-bottom:1px solid #e8e8e8;
    }
    div{
      height: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-right:1px solid #e8e8e8;
      &:last-child{
        border-right: 0;
      }
    }
    .zlmc{
      width:400px;
      // display: flex;
      // flex-wrap: nowrap;
      // word-break: break-all;
      text-align: left;
      padding-left: 5px;
    }
    .xuhao{
      width:75px;
    }
    .xian{
      width:220px;
    }
    .jiqun{
      width:220px;
    }
    .mingcheng{
      flex:1;
    }
  }
 
  

  @keyframes rotation {
  0% {
      width:30px;
      height: fit-content;
    }
    50%{
      width:60px;
      height: fit-content;
    }
    100% {
      width:30px;
      height: fit-content;
    }
  }
</style>
<style lang="less" >
.selectYear{
  width: 129px;
  height: 38px;
  position: absolute;
  top:50px;
  left:10px;
  border:1px solid #fff;
  .ant-input{
    background-color: rgba(0,0,0,0) !important;
    border:none;
    color: #DAF9FF;
  }
  .ant-calendar-picker-icon{
    color:rgba(45, 140, 240, 1)
  }
}
.itemModel{
  min-height: 300px;
  max-height: 75vh;
  overflow: auto;
}
</style>